<template>
  <!-- 添加或修改用户对话框 -->
  <el-dialog :title="title" :visible.sync="visible" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="任务类名" prop="jobClassName">
        <el-input v-model="form.jobClassName" placeholder="请输入任务类名" />
      </el-form-item>
      <el-form-item label="Cron表达式" prop="cronExpression">
        <div class="box">
          <el-input v-model="form.cronExpression" placeholder class="inp"></el-input>
          <el-button type="primary" @click="showDialog">生成 cron</el-button>
        </div>
        <el-dialog title="生成 cron" :visible.sync="showCron" append-to-body>
          <vcrontab @hide="showCron = false" @fill="crontabFill" :expression="expression"></vcrontab>
        </el-dialog>
      </el-form-item>
      <el-form-item label="参数" prop="parameter">
        <el-input v-model="form.parameter" placeholder="请输入参数" />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input type="textarea" placeholder="请输入描述" :rows="3" v-model="form.description" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio-button label="0">正常</el-radio-button>
          <el-radio-button label="-1">停止</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm"> 确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addQrtz, updateQrtz } from '@/api/mange/qrtz'
import cron from 'vue-cron'
import vcrontab from 'vcrontab'

export default {
  name: 'QuartzJobModal',
  components: {
    vcrontab
  },
  data() {
    return {
      title: '操作',
      buttonStyle: 'solid',
      // 按钮loading
      buttonLoading: false,
      visible: false,
      form: {
        cronExpression: ''
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      rules: {
        cronExpression: [{ required: true, message: '请输入cron表达式!' }],
        jobClassName: [{ required: true, message: '请输入任务类名!' }]
      },
      cronPopover: false,
      cron: '',
      input: '',
      expression: '',
      showCron: false
    }
  },
  created() {},
  methods: {
    crontabFill(value) {
      //确定后回传的值
      this.form.cronExpression = value
    },
    showDialog() {
      //传入的 cron 表达式，可以反解析到 UI 上
      this.expression = this.form.cronExpression
      this.showCron = true
    },
    changeCron(val) {
      this.form.cronExpression = val
    },
    // 表单重置
    reset() {
      this.form = {}
      this.resetForm('form')
    },
    add() {
      this.reset()
      // 统一设置默认值
      this.edit({
        cronExpression: '* * * * * ? *',
        status: 0
      })
    },
    edit(record) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.form = Object.assign({}, record)
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    /** 提交按钮 */
    submitForm() {
      const that = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          if (this.form.id != null) {
            updateQrtz(this.form)
              .then((response) => {
                this.msgSuccess('修改成功')
                this.visible = false
                that.$emit('ok')
              })
              .finally(() => {
                this.buttonLoading = false
              })
          } else {
            addQrtz(this.form)
              .then((response) => {
                this.msgSuccess('新增成功')
                this.visible = false
                that.$emit('ok')
              })
              .finally(() => {
                this.buttonLoading = false
              })
          }
        }
      })
    },
    cancel() {
      this.close()
    }
  }
}
</script>

<style scoped>
.box {
  display: inline-flex;
}
</style>
